<template>
  <div class="h-[80vh] py-2 flex flex-col">
    <h4 class="text-xl font-bold text-zinc-900 mb-2 px-1 dark:text-zinc-200">
      所有内容
    </h4>
    <ul class="overflow-y-scroll">
      <li
        v-for="(item, index) in $store.getters.categoryList"
        :key="item.id"
        @click="$emit('itemCLick', index)"
        class="dark:text-zinc-300 dark:active:bg-zinc-900 text-base duration-100 text-zinc-900 px-1 py-1.5 active:bg-zinc-100"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue'
// const props = defineProps({
//   cetagorys: {
//     type: Array,
//     required: true
//   }
// })
const emits = defineEmits(['itemClick'])
</script>
<style scoped lang="scss"></style>
